<template>
  <div class="article-side-actions">
    <!-- 点赞按钮 -->
    <div class="action-item like-action" @click="handleLike">
      <el-tooltip content="点赞" placement="right">
        <div class="action-button" :class="{ active: isLiked }">
          <el-icon class="action-icon">
            <LinearNewOhterLikeThumbUp />
          </el-icon>
          <span class="action-count">{{ formatNumber(likeCount) }}</span>
        </div>
      </el-tooltip>
    </div>

    <!-- 评论按钮 -->
    <div class="action-item comment-action" @click="handleToggleCommentDrawer">
      <el-tooltip content="评论" placement="right">
        <div class="action-button">
          <el-icon class="action-icon">
            <ChatDotRound />
          </el-icon>
          <span class="action-count">{{ formatNumber(commentCount) }}</span>
        </div>
      </el-tooltip>
    </div>

    <!-- 收藏按钮 -->
    <div class="action-item collect-action" @click="handleCollect">
      <el-tooltip content="收藏" placement="right">
        <div class="action-button" :class="{ active: isCollected }">
          <el-icon class="action-icon">
            <Star />
          </el-icon>
          <span class="action-count">{{ formatNumber(collectCount) }}</span>
        </div>
      </el-tooltip>
    </div>

    <!-- 分享按钮 -->
    <div class="action-item share-action" @click="handleShare">
      <el-tooltip content="分享" placement="right">
        <div class="action-button">
          <el-icon class="action-icon">
            <Share />
          </el-icon>
          <span class="action-count">0</span>
        </div>
      </el-tooltip>
    </div>

    <!-- 移动端底部交互栏 -->
    <div class="mobile-bottom-actions">
      <div class="mobile-action-item" @click="handleLike">
        <el-icon class="mobile-action-icon" :class="{ active: isLiked }">
          <LinearNewOhterLikeThumbUp />
        </el-icon>
        <span class="mobile-action-text">{{ formatNumber(likeCount) }}</span>
      </div>

      <div class="mobile-action-item" @click="handleToggleCommentDrawer">
        <el-icon class="mobile-action-icon">
          <ChatDotRound />
        </el-icon>
        <span class="mobile-action-text">{{ formatNumber(commentCount) }}</span>
      </div>

      <div class="mobile-action-item" @click="handleCollect">
        <el-icon class="mobile-action-icon" :class="{ active: isCollected }">
          <Star />
        </el-icon>
        <span class="mobile-action-text">{{ formatNumber(collectCount) }}</span>
      </div>

      <div class="mobile-action-item" @click="handleShare">
        <el-icon class="mobile-action-icon">
          <Share />
        </el-icon>
        <span class="mobile-action-text">分享</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { Star, ChatDotRound, Share } from "@element-plus/icons-vue";
import { LinearNewOhterLikeThumbUp } from "@element-extended-icon-pack/vue";
import { UserArticleUtils } from "@/api/user-article";

interface Props {
  articleId: number;
  likeCount: number;
  commentCount: number;
  collectCount: number;
  isLiked: boolean;
  isCollected: boolean;
  isLoggedIn: boolean;
}

const props = defineProps<Props>();

const emit = defineEmits<{
  like: [];
  collect: [];
  share: [];
  commentCountChange: [count: number];
  toggleCommentDrawer: [];
}>();

// 工具方法
const formatNumber = UserArticleUtils.formatNumber;

// 事件处理
const handleLike = () => {
  if (!props.isLoggedIn) {
    ElMessageBox.confirm("点赞功能需要登录，是否前往登录页面？", "提示", {
      confirmButtonText: "去登录",
      cancelButtonText: "取消",
      type: "info"
    })
      .then(() => {
        // 这里应该跳转到登录页，由父组件处理
        emit("like");
      })
      .catch(() => {
        // 用户取消
      });
    return;
  }
  emit("like");
};

const handleCollect = () => {
  if (!props.isLoggedIn) {
    ElMessageBox.confirm("收藏功能需要登录，是否前往登录页面？", "提示", {
      confirmButtonText: "去登录",
      cancelButtonText: "取消",
      type: "info"
    })
      .then(() => {
        // 这里应该跳转到登录页，由父组件处理
        emit("collect");
      })
      .catch(() => {
        // 用户取消
      });
    return;
  }
  emit("collect");
};

const handleShare = () => {
  emit("share");
};

const handleToggleCommentDrawer = () => {
  emit("toggleCommentDrawer");
};

const handleCommentCountChange = (count: number) => {
  emit("commentCountChange", count);
};
</script>

<style scoped lang="scss">
// 桌面端定位优化
@media (width >= 1200px) and (width <= 1399px) {
  .article-side-actions {
    left: calc((100vw - 1200px) / 2 - 70px);
  }
}

// 大屏幕适配
@media (width >= 1600px) {
  .article-side-actions {
    left: calc((100vw - 1400px) / 2 - 90px);
  }
}

// 中等屏幕适配 - 避免遮挡文章内容
@media (width >= 1000px) and (width <= 1199px) {
  .article-side-actions {
    left: 10px;
    transform: translateY(-50%) scale(0.9);
  }
}

// 平板端和移动端隐藏桌面端交互栏
@media screen and (width <= 999px) {
  .article-side-actions {
    display: none;
  }
}

// 暗色主题适配
@media (prefers-color-scheme: dark) {
  .article-side-actions {
    background: #1a1a1a;
    border-color: rgb(255 255 255 / 10%);

    .action-button {
      color: #ccc;

      &:hover {
        color: #409eff;
        background: rgb(64 158 255 / 15%);
      }
    }
  }
}

.article-side-actions {
  position: fixed;
  top: 50%;
  left: 20px;
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 12px;
  background: #fff;
  border: 1px solid rgb(0 0 0 / 6%);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgb(0 0 0 / 8%);
  backdrop-filter: blur(8px);
  transform: translateY(-50%);

  // 确保在大屏幕上显示
  @media (width >= 1200px) {
    left: calc((100vw - 1200px) / 2 - 80px);
  }

  @media (width >= 1400px) {
    left: calc((100vw - 1400px) / 2 - 80px);
  }
}

.action-item {
  cursor: pointer;
  transition: all 0.2s ease;

  &:hover {
    transform: scale(1.05);
  }

  &:active {
    transform: scale(0.95);
  }
}

.action-button {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  min-width: 50px;
  padding: 12px 8px;
  color: #666;
  border-radius: 8px;
  transition: all 0.3s ease;

  &:hover {
    color: #409eff;
    background: rgb(64 158 255 / 10%);
  }

  &.active {
    color: #409eff;
    background: rgb(64 158 255 / 10%);

    .action-icon {
      color: #409eff;
    }
  }
}

.action-icon {
  font-size: 20px;
  transition: all 0.3s ease;
}

.action-count {
  font-size: 12px;
  font-weight: 500;
  transition: all 0.3s ease;
}

// 特定按钮的激活颜色
.like-action .action-button.active {
  color: #ff6b6b;
  background: rgb(255 107 107 / 10%);

  .action-icon {
    color: #ff6b6b;
  }

  &:hover {
    color: #ff5252;
    background: rgb(255 107 107 / 15%);
  }
}

.collect-action .action-button.active {
  color: #ffa726;
  background: rgb(255 167 38 / 10%);

  .action-icon {
    color: #ffa726;
  }

  &:hover {
    color: #ff9800;
    background: rgb(255 167 38 / 15%);
  }
}

.comment-action .action-button:hover {
  color: #67c23a;
  background: rgb(103 194 58 / 10%);
}

.share-action .action-button:hover {
  color: #909399;
  background: rgb(144 147 153 / 10%);
}

// 移动端底部交互栏样式
.mobile-bottom-actions {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1000;
  display: none;
  padding: 12px 0 calc(12px + env(safe-area-inset-bottom));
  background: #fff;
  border-top: 1px solid rgb(0 0 0 / 10%);
  box-shadow: 0 -2px 10px rgb(0 0 0 / 8%);
  backdrop-filter: blur(8px);

  // 在移动端显示
  @media screen and (width <= 999px) {
    display: flex;
    align-items: center;
    justify-content: space-around;
  }
}

.mobile-action-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px; // iOS推荐的最小触摸目标
  padding: 8px 12px;
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.2s ease;

  &:active {
    background: rgb(0 0 0 / 5%);
    transform: scale(0.95);
  }
}

.mobile-action-icon {
  font-size: 20px;
  color: #666;
  transition: all 0.2s ease;

  &.active {
    color: #409eff;
  }
}

.mobile-action-text {
  font-size: 11px;
  font-weight: 500;
  color: #666;
  transition: all 0.2s ease;
}

// 移动端特定按钮激活样式
.mobile-action-item:nth-child(1) .mobile-action-icon.active {
  color: #ff6b6b; // 点赞激活色
}

.mobile-action-item:nth-child(3) .mobile-action-icon.active {
  color: #ffa726; // 收藏激活色
}
</style>
